<template>
  <div class="app-container home">
    <h1>APP</h1>
    <div class="page-index">
      <!-- <router-link :to="{name:'setting', path:'/settings', params:{key:value}}">东西里</router-link> -->

      <button type="submit" @click="toggleSetting">Open settings window </button>
      <GreetRust />
      <AxiosHttp />
      <!-- <el-image style="width: 95%;" src="/src/assets/images/index.png" fit="contain"></el-image> -->
    </div>
  </div>
</template>

<script setup name="Index">

import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

// import { WebviewWindow } from '@tauri-apps/api/window';

import { ref } from 'vue';
// import router from '@/router'
import { useRouter } from "vue-router";
const router = useRouter();

import HelloWorld from "@/components/HelloWorld.vue";
import GreetRust from "@/components/GreetRust.vue";
import AxiosHttp from "@/components/AxiosHttp.vue";
import { emit } from '@tauri-apps/api/event';

const version = ref("3.8.8");

function onCreateWindow () {

  const opt = {
    "title": "设置",
    "width": 600,
    "height": 800,
    "label": "settings",
    "url": "/settings",
    "center": true,
    "resizable": true,
    "visible": false
  }


  const webview = new WebviewWindow('settings', {
    url: '/settings',
    title: '设置',
    width: 800,
    height: 600,
    x: 100,
    y: 100
  });

  webview.once('tauri://created', () => {
    console.log('窗口创建成功');
  });

  webview.once('tauri://error', (error) => {
    console.log('窗口创建失败', error);
  });
}


function goTarget (url) {
  window.open(url, "__blank");
}
function toggleSetting (evt) {
  // router.push({ path: 'setting' })
  onCreateWindow()
  console.log(evt)
}
</script>

<style scoped lang="scss">
  .page-index {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px 10px 10px 10px;
    height: calc(100vh - 100px);
  }
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }
    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }
    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }
</style>
